<template>
  <div>
    <footer class="footer-nav">
      <router-link :to="{name:'index'}" exact>
        <div class="p-icon" >
          <icon symbol="home"></icon>
        </div>
        <div class="p-name">主页</div>
      </router-link>
      <router-link :to="{name:'shop', params:{shopId:'WFRWZ001'}}">
        <div class="p-icon">
          <icon symbol="fate"></icon>
        </div>
        <div class="p-name">分类</div>
      </router-link>
      <router-link :to="{name:'order'}" exact>
        <div class="p-icon">
          <icon symbol="order"></icon>
        </div>
        <div class="p-name">订单</div>
      </router-link>
      <router-link :to="{name:'account'}" exact>
        <div class="p-icon">
          <icon symbol="account"></icon>
        </div>
        <div class="p-name">我的</div>
      </router-link>
    </footer>
  </div>
</template>

<script>
  import Icon from './icon.vue'
  export default {
    components:{
      Icon
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  .footer-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 97/75rem;
    z-index: 100;
    border-top: 1px solid #f5f5f5;
    background-color: #fff;
    display: flex;
    a{
      display: block;
      flex: 1;
      height: 98/75rem;
      text-align: center;
      padding-top: 10/75rem;
      svg {
        width:40/75rem;
        height:40/75rem;
        fill: #bbc0c6;
      }
      font-size: 24/75rem;
      .p-name{
        color: #bbc0c6;
      }
      &.router-link-active{
        svg {
          fill: #ffb230
        }
        .p-name{
          color: #ffb230;
        }
      }
    }

  }
</style>